import Vue from 'vue'  // 引入vue框架
import App from './App.vue' // 页面入口文件（.vue后缀的文件都称为组件）

Vue.config.productionTip = false

// 路由的是使用
// 1、下载vue-router , npm i vue-router
// 2、引入路由
import VueRouter from "vue-router";
// 3、注册全局组件
Vue.use(VueRouter);
// 4、创建路由规则数组
const routes = [
  {
    path: "/", // 匹配网页打开的默认路径“/",
    redirect: "/find" // 重定向到“发现音乐”页面，redirect的值就是目录路由的path的值
  },
  {
    path: "/find", // 定义访问路径
    component: ()=>import("./views/find.vue"), // 这种通过函数的方法引入组件，路由的按需引入
    name: "find"
  },{
    path: "/my/:age",
    component: ()=>import("./views/my.vue")
  },
  {
    path: "/friend",
    component: ()=>import("./views/friend.vue"),
    name: "friend"
  },
  { // 匹配404页面，当用户访问的路径不存在的时候，就会被*匹配到，然后能显示404组件内容了
    path: "*", // * 表示匹配任意路径，注意：这个配置需要写到路由规则的最后面
    component: ()=>import("./views/noFound.vue")
  }
]
// 5、 用路由规则生成路由对象
const router = new VueRouter({
  routes: routes,
   // mode： 切换路由模式，默认值为hash
  //  路由模式有2种
  // 1、hash模式：在浏览器URL地址栏多了一个#，是通过锚点跳转实现路由跳转的
  // 2、history模式: 在浏览器地址栏中没有#，是history对象的相关方法实现跳转的
        // 上线后需要配置后台，才能实现真正跳转
  mode: "history"
})
new Vue({
  router: router, // 6、把路由对象注入到new Vue中
  render: h => h(App),
}).$mount('#app') // $mount挂载，表示渲染的内容将来要替换到id为app的标签位置上
// 7、在App.vue组件设置路由挂载点 router-view